<template>
  <div class="back">
    <header class="head">
      <h1>电商后台</h1>
      <h2>电商后台管理系统</h2>
      <router-link to="/">退出</router-link>
    </header>
    <Layout :style="{height: layoutHeight,'min-height': '400px'}">
      <Sider hide-trigger :style="{background: '#fff'}">
        <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
          <Submenu :name="''+index" v-for="(item,index) in item1" :key="index">
            <template slot="title">
              <Icon type="md-pin" class="md"></Icon>
              {{item.authName}}
            </template>
            <MenuItem
              :to="'/backstage/'+item1.path"
              :name="index+'-'+index1"
              v-for="(item1,index1) in item.children"
              :key="index1"
            >
              <Icon type="ios-keypad"></Icon>
              {{item1.authName}}
            </MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '10px 0'}"></Breadcrumb>
        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import http from "@/api/port";
export default {
  data() {
    return {
      layoutHeight: 0,
      query: "",
      pagenum: "",
      pagesize: "",
      item1: [],
      item2: []
    };
  },
  mounted() {
    let _this = this;
    _this.layoutHeight = document.documentElement.clientHeight - 60 + "px";
    window.onresize = function() {
      _this.layoutHeight = document.documentElement.clientHeight - 60 + "px";
    };
  },
  methods: {
    limit() {
      http("menus", {}, "get", {}).then(res => {
        console.log("左侧菜单", res);
        this.item1 = res.data;
      });
    }
  },
  created() {
    this.limit();
  }
};
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
}
.head {
  width: 100%;
  height: 60px;
  background: #b3c0d1;
  padding: 0 20px;
  display: flex;
  align-content: center;
  h1 {
    font-size: 42px;
    display: inline-block;
    font-family: "宋体";
    line-height: 60px;
  }
  h2 {
    width: 80%;
    text-align: center;
    line-height: 60px;
    color: white;
  }
  a {
    line-height: 60px;
  }
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.heig {
  height: 100%;
}
</style>